<template>
	<view>
		<uni-segmented-control :current="current" :values="loveSeg" @clickItem="segClick"
			style-type="text"></uni-segmented-control>
		<view class="content">
			<uni-list v-if="dataList.length">
				<uni-list-item v-for="(item,index) in dataList" :key="item._id"  @click="navigator(item.id)" clickable>
					<template v-slot:body>
						<view class="u-box">
							<view style="display: flex;align-items: center;">
								<image :src="item.avatar_file && item.avatar_file.url || logo" mode="aspectFill"
									class="u-img"></image>
								<text>{{item.nickname}}</text>
							</view>
							<view  @click.stop>
								<uni-tag text="删除" type="warning" v-if="current==1" @click="del(item._id)"></uni-tag>
							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-load-more :status="more"></uni-load-more>
			</uni-list>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	import logo from "@/static/logo.png"
	import {
		useUserStore
	} from "@/pinia/user.js"
	import {
		mapState,
		mapActions
	} from "pinia"
	export default {
		data() {
			return {
				logo,
				current: 0,
				loveSeg: ['关注我的', '我关注的'],
				dataList: [],
				more: "more",
				skip:0
			}
		},
		computed: {
			...mapState(useUserStore, ['userInfo']),
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			segClick(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					this.clear()
					this.loadData()
				}
			},
			async loadData() {
				console.log("data=======",this.skip);
				let where = ''
				if (this.current == 0) {
					where = `hid == '${this.userInfo._id}'`
					// where = `hid == '64a03f9fe766bb769162e015'`
				} else {
					where = `uid == '${this.userInfo._id}'`
				}
				let loveLineTemp = db.collection('wolf-love-line').where(where).getTemp()
				let usersTemp = db.collection('uni-id-users').field("_id,nickname,avatar_file").getTemp()
				let res = await db.collection(loveLineTemp, usersTemp).skip(this.skip).limit(20).get({getCount:true})
				res.result.data.forEach(item => {
					if (this.current == 0) {
						item.avatar_file = item.uid[0]?.avatar_file
						item.nickname = item.uid[0]?.nickname
						item.id = item.uid[0]?._id
					} else {
						item.avatar_file = item.hid[0]?.avatar_file
						item.nickname = item.hid[0]?.nickname
						item.id = item.hid[0]?._id
					}
				})
				this.dataList = [...this.dataList, ...res.result.data]
				this.skip = this.skip+20
				if(this.skip >= res.result.count){
					this.more = "no-more"
				}else{
					this.more = "more"
				}
				console.log(res.result);
				
			},
			clear(){
				this.dataList = []
				this.more = "more"
				this.skip = 0
			},
			async del(id){
				console.log("id====>",id);
				uni.showLoading({
					title:"删除中...",
					mask:true
				})
				await db.collection('wolf-love-line').doc(id).remove()
				this.clear()
				this.loadData()
				uni.hideLoading()
			},
			navigator(id){
				console.log("id==>",id);
				if(!id) return
				uni.navigateTo({
					url:`/pages/list/userInfo?id=${id}`
				})
			}
		},
		onReachBottom(){
			if(this.more == 'more'){
				this.more = "loading"
				this.loadData()
			}
		}
	}
</script>

<style scoped>
	.u-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		font-size: 12px;
		flex: 1;
	}
	.u-img{
		width: 50rpx;
		height: 50rpx;
		border-radius: 5px;
		margin-right: 10px;
	}
</style>